<template>
    <div class="addBox">
        <span class="pageName">指挥调度 / 创建调度</span>
        <div class="addForm">
            <el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize">
                <el-form-item label="任务标题" prop="title">
                    <el-input v-model="addForm.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="任务类型" prop="type">
                    <el-button @click="btn1" type="primary" :plain="btnSelect1">疾控核实</el-button>
                    <el-button @click="btn2" type="primary" :plain="btnSelect2">120转运</el-button>
                    <el-button @click="btn3" type="primary" :plain="btnSelect3">环境采样</el-button>
                    <el-button @click="btn4" type="primary" :plain="btnSelect4">其他</el-button>
                </el-form-item>
                <el-form-item label="任务对象" prop="object">
                    <div class="box">
                        <!-- <el-table :data="addForm.object" style="width: 70% " :show-header="false"
                            :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '80px' }">
                            <el-table-column align="left"  label="名称" />
                            <el-table-column align="center"  label="内容"/>
                        </el-table> -->
                        <el-form label-position="right" label-width="120px" :model="addForm.object"
                            style="max-width: 460px">
                            <el-form-item label="姓名">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].name" />
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].sex" />
                            </el-form-item>
                            <el-form-item label="身份证号/护照号">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].idCard" />
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].phoneNum" />
                            </el-form-item>
                            <el-form-item label="现居住地">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].address" />
                            </el-form-item>
                            <el-form-item label="登记人">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].registrant" />
                            </el-form-item>
                            <el-form-item label="密接类型">
                                <el-input style="width: 200px;height: 28px;" v-model="addForm.object[0].status" />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-form-item>
                <el-form-item label="负责小组" prop="group">
                    <el-button class="select" @click="selectGroup">选择</el-button>
                    <el-dialog v-model="dialogVisible" title="分配" width="20%" :before-close="handleClose">
                        <ul>
                            <el-radio-group v-model="checkList"
                                style="display:flex;flex-direction:column;align-items: flex-start">
                                <el-radio label="密接排查组" />
                                <el-radio label="排查一组" />
                                <el-radio label="排查二组" />
                                <el-radio label="排查三组" />
                                <el-radio label="排查四组" />
                            </el-radio-group>
                        </ul>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="determine">确认</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </el-form-item>
                <el-form-item label="转运隔离点" prop="isolation" v-show="isolation">
                    <el-input v-model="addForm.isolation" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="截止时间" prop="time">
                    <el-date-picker v-model="addForm.time" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm" />
                </el-form-item>
                <el-form-item label="任务描述" prop="des">
                    <el-input v-model="addForm.des" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                        placeholder="请输入" />
                </el-form-item>
                <el-form-item class="formBtn">
                    <el-button @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="submitForm(addFormRef)">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/util/http'
import { parseTime } from '@/util/date'
export default defineComponent({
    name: 'AddCommand',
    setup() {
        let isolation = ref(false)
        const btn1 = () => {
            isolation.value = false
            state.addForm.type = '疾控核实'
            state.btnSelect1 = false
            state.btnSelect2 = true
            state.btnSelect3 = true
            state.btnSelect4 = true
        }
        const btn2 = () => {
            isolation.value = true
            state.addForm.type = '120转运'
            state.btnSelect1 = true
            state.btnSelect2 = false
            state.btnSelect3 = true
            state.btnSelect4 = true
        }
        const btn3 = () => {
            isolation.value = false
            state.addForm.type = '环境采样'
            state.btnSelect1 = true
            state.btnSelect2 = true
            state.btnSelect3 = false
            state.btnSelect4 = true
        }
        const btn4 = () => {
            isolation.value = false
            state.addForm.type = '其他'
            state.btnSelect1 = true
            state.btnSelect2 = true
            state.btnSelect3 = true
            state.btnSelect4 = false
        }
        const selectGroup = () => {
            dialogVisible.value = true
        }
        const state = reactive({
            // 按钮
            btnSelect1: ref(false),
            btnSelect2: ref(true),
            btnSelect3: ref(true),
            btnSelect4: ref(true),
            checkList: '',
            formSize: ref('default'),
            // 表单数据
            addForm: reactive({
                title: '',
                type: '疾控核实',
                object: [
                    {
                        name: '',
                        sex: '',
                        idCard: '',
                        phoneNum: '',
                        address: '',
                        registrant: '',
                        status:''
                    }
                ],
                group: '',
                isolation: '',
                time: '',
                des: '',
            }),
            // 表格

        })

        const router = useRouter();
        const route = useRoute()

        //弹出框
        const dialogVisible = ref(false)
        const choose = () => {
            dialogVisible.value = true
        }
        const handleClose = () => {
            dialogVisible.value = false
        }
        const determine = () => {
            state.addForm.group = state.checkList
            dialogVisible.value = false
        }

        const addFormRef = ref<FormInstance>()
        const rules = reactive<FormRules>({
            title: [
                { required: true, message: '请输入任务标题', trigger: ['change', 'blur'] },
            ],
            type: [
                { required: true, message: '请输入任务类型', trigger: ['change', 'blur'] },
            ]
        })

        const cancelAdd = () => {
            router.push('/zh');
            ElMessage('已取消创建！')
        }
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {
                    axios({
                        method: 'post',
                        url: 'command/addTask',
                        data: {
                            taskTitle: state.addForm.title,
                            taskType: state.addForm.type,
                            taskStatus: state.addForm.object[0].status,
                            taskGroup: state.addForm.group,
                            endTime: state.addForm.time,
                            taskDes: state.addForm.des,
                            districtSysContact: {
                                name: state.addForm.object[0].name,
                                sex: state.addForm.object[0].sex,
                                idCard: state.addForm.object[0].idCard,
                                phoneNum: state.addForm.object[0].phoneNum,
                                address: state.addForm.object[0].address,
                                registrant: state.addForm.object[0].registrant
                            },
                        }
                    })
                        .then(res => {
                            if (res.data.msg == '添加成功') {
                                ElMessage({
                                    message: '创建成功！',
                                    type: 'success',
                                })
                                router.push('/zh')
                            }
                        })
                } else {
                    console.log('添加失败!', fields);
                }

            })
        }


        return {
            //弹出框
            choose,
            dialogVisible,
            handleClose,
            determine,
            isolation,
            btn1,
            btn2,
            btn3,
            btn4,
            selectGroup,
            ...toRefs(state),
            addFormRef,
            rules,
            // 按钮
            cancelAdd,
            submitForm,

        }
    }
})
</script>

<style scoped lang="less">
.addBox {
    width: 100%;
    display: flex;
    flex-direction: column;

    .box {
        width: 410px;
        border: 1px solid rgb(225, 224, 224);
        border-radius: 5px;
    }

    //标签
    .label {
        color: #e2e0e0;
        width: 80px;
        height: 30px;
        background: #1bb0f1;
        color: white;
        position: absolute;
        top: 10px;
        right: 10px;
        text-align: center;
        border-radius: 3px;
    }

    // 页面名称
    .pageName {
        font-size: 13px;
        color: #333333;
        font-weight: 400;
    }

    // 选择
    .select {
        background: none;
        border: none;
        color: #4200ff;
        font-size: 13px;

        &:hover {
            text-decoration: underline;
        }

    }

    // 创建表单
    .addForm {
        width: 80%;
        display: flex;
        background: white;
        margin-top: 20px;
        padding: 30px;
        border-radius: 4px;

        /deep/.el-input {
            width: 410px;
            height: 40px;
            font-size: 13px;
        }



        /deep/ .formBtn {
            width: 83%;
            margin-top: 80px;

            .el-form-item__content {
                display: flex;
                justify-content: flex-end;

                // 按钮
                .el-button {
                    width: 95px;
                    height: 40px;
                    font-size: 13px;
                }
            }
        }
    }



}

.el-form-item {
    display: flex;
    align-items: center
}

/deep/ .el-form-item__label {
    font-size: 13px;
}
</style>